import React,{Component} from 'react'
import {Descriptions,Tag,Switch,Input,Button,Modal} from 'antd'
import colorUtils from 'utils/colorUtils'
import { EditOutlined } from '@ant-design/icons'
import {inject, observer} from 'mobx-react'


/**
 * 名称：标签明细栏
 * 描述：标签明细栏
 * 调用：标签中心
 * 输入：tagStore 标签相关存储
 * 时间：20220403
 */
 @inject('tagStore')
 @observer
class AssetTagDetail  extends Component{
    constructor(props){
        super(props)
        //标签明细是否可编辑
        this.state = {isEdit:false,modalInvalid:false}
        
    }
    render(){
        const {tagStore} = this.props
        const {tagDetail,tagDescription,tagStatusChecked} = tagStore
        const {key,name,catagery,activityNum,createTag,ctime} = tagDetail
        let {isEdit} = this.state
        const colors=colorUtils.getColors()
        
        
        
        return (
            key?
            <div>
            <Descriptions title={name}>
                <Descriptions.Item label="标签英文名">{key}</Descriptions.Item>
                <Descriptions.Item label="状态">
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={tagStatusChecked} onChange={()=>{tagStatusChecked?tagStore.apiTagOff(key):tagStore.apiTagOn(key)}}/>
        
                </Descriptions.Item>
                <Descriptions.Item label="标签描述" >
                    <Input value={tagDescription} size="small" style={{width:"90%"}} disabled={!isEdit} 
                        onChange={(item)=>{tagStore.setTagDescription(item.target.value)}}
                        onBlur={(item)=>{
                            tagStore.apiTagDescription(key,item.target.value)
                            this.setState({isEdit:!isEdit})
                        }}/>
                    <EditOutlined onClick={()=>{this.setState({isEdit:!isEdit})}}/>
                </Descriptions.Item>
                <Descriptions.Item label="标签类别">{catagery}</Descriptions.Item>
                <Descriptions.Item label="引用活动数">{activityNum}</Descriptions.Item>
                <Descriptions.Item label="衍生标签">
                    {createTag && createTag.map((item,index)=>{
                            return <Tag color={colors[index]} key={item}>{item}</Tag>
                    })
                }
                </Descriptions.Item>
                <Descriptions.Item label="创建时间"><span style={{color:"grey",fontSize:"10px"}}>{ctime}</span></Descriptions.Item>
                <Descriptions.Item ><Button onClick={()=>this.setState({modalInvalid:true})}>删除</Button></Descriptions.Item>

            </Descriptions>
            <Modal
                visible={this.state.modalInvalid}
                title="确认删除"
                
                onOk={()=>{
                    this.setState({modalInvalid:false})
                    tagStore.apiDeleteTag(key)
                    
                }}
                onCancel={()=>{this.setState({modalInvalid:false})}}
                >
                    请确认是否删除标签 "{name}"
                </Modal> 
       </div>
       :""
        )
    }

    

}

export default AssetTagDetail